/*
 * @Author: Drc
 * @Date: 2020-07-27 15:46:54
 * @LastEditors: Drc
 * @LastEditTime: 2021-10-12 10:19:37
 */
import Pop, {PopProps} from '.'
import React, {memo} from 'react'
import {View, TouchableOpacity, Text} from 'react-native'
import {px2dp} from '@path/config/system'
import {ThemeText} from '@path/components/ThemeComponents'
import Theme from '@path/config/theme'
import _ from 'lodash'
interface Button {
  text: string
  onPress: () => any
  Theme?: 'main' | 'minor'
}

interface AlertPopProps extends PopProps {
  title?: string
  content?: string
  buttonList?: Button[]
  customContent?: JSX.Element
}

class AlertPop extends Pop<AlertPopProps> {
  constructor(props: any) {
    super(props)
  }

  static defaultProps: AlertPopProps = {
    ...super.defaultProps,
    title: '',
    content: '',
    buttonList: [],
  }

  renderContent = () => {
    const {title, content, buttonList, customContent} = this.props
    return (
      <View
        style={{
          width: px2dp(335),
          backgroundColor: Theme.getThemeColor('bg_deep'),
          borderRadius: 8,
          paddingTop: px2dp(36),
          alignSelf: 'center',
          alignItems: 'center',
          overflow: 'hidden',
        }}>
        <View style={{alignItems: 'center', paddingHorizontal: px2dp(24), paddingBottom: px2dp(34.5)}}>
          {/* 头部 */}
          {title ? (
            <ThemeText
              style={{
                fontSize: 18,
                fontWeight: 'bold',
                color: Theme.getThemeColor('text_main'),
                marginBottom: px2dp(8),
              }}>
              {title}
            </ThemeText>
          ) : null}
          {/* 内容 */}
          {content ? (
            <ThemeText
              style={{
                textAlign: 'center',
                fontSize: 14,
                color: Theme.getThemeColor('text_main'),
              }}>
              {content}
            </ThemeText>
          ) : null}
        </View>
        {/* 自定义内容 */}
        {customContent ? customContent : null}
        {/* 按钮 */}
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            borderTopWidth: 0.5,
            borderTopColor: Theme.getThemeColor('border'),
          }}>
          {buttonList?.map((item: any, index: number) => {
            return (
              <TouchableOpacity
                style={[
                  {
                    padding: px2dp(5),
                    backgroundColor: Theme.getThemeColor('bg'),
                    flex: 1,
                    height: px2dp(56),
                    alignItems: 'center',
                    justifyContent: 'center',
                  },
                  index > 0 ? {borderLeftWidth: 0.5, borderLeftColor: Theme.getThemeColor('border')} : {},
                ]}
                activeOpacity={0.8}
                onPress={() => {
                  item.onPress()
                }}>
                <ThemeText
                  numberOfLines={2}
                  style={{
                    textAlign: 'center',
                    fontSize: 14,
                    color: item.Theme === 'main' ? Theme.getThemeColor('text_main') : Theme.getThemeColor('text_minor'),
                  }}>
                  {item.text}
                </ThemeText>
              </TouchableOpacity>
            )
          })}
        </View>
      </View>
    )
  }
}

export default memo(
  AlertPop,
  (prev, next) => _.isEqual(prev.isVisible, next.isVisible) && _.isEqual(prev.customContent, next.customContent),
)
